<template>
  <div style="margin-bottom: 1rem">
    <div class="redTltle">
      <van-row>
        <van-col span="2"><van-icon name="arrow-left" @click="routerBack"/></van-col>
        <van-col span="5"  offset="8"><div class="redTltle">期刊详情</div></van-col>
      </van-row>
    </div>
    <!--    红线以上-->
    <div class="topBox">
      <div class="bigImg">
        <van-image
            width="3.48rem"
            height="4.773rem"
            :src="ip + list.number + '.jpg'"
        />
      </div>
      <div class="bookName">
        {{ list.title }}
      </div>
    </div>
    <!--    红线以上 end-->
    <div class="redline"></div>
    <!--    红线以下 基本信息-->
    <div>
      <div class="detailstext">
        <div>基本信息</div>
        <div>主办单位：{{ list.organizer }}</div>
        <div>出版地：{{ list.region }}</div>
        <div>刊期：{{ list.stage }}</div>
        <div>ISSN: {{ list.issn }}</div>
        <div>CN: {{ list.cn }}</div>
      </div>
    </div>
    <!--    红线以下 目录-->
    <div class="bottomBox">
      <div class="nav">
        目录
      </div>
      <!--      日期-->
      <div class="navbottomText">
        <van-row>
          <van-col span="10">
            <div class="yearText">{{ this.activeName }}年{{list.stage}}</div>
          </van-col>
<!--          <van-col span="5">-->
<!--            <div class="nub">（共{{ count }}期）</div>-->
<!--          </van-col>-->
          <van-col span="3" offset="11">
            <div class="smred" @click="stagebtn">选期</div>
          </van-col>
        </van-row>
      </div>
      <!--      list-->
      <div>
        <div v-for="(item , index) in lists" :key="index" @click="topdf(item)">
          <div class="listTitle">
            {{ item.title }}
          </div>
          <div class="listname">
            <van-row>
              <van-col span="2">作者</van-col>
              <van-col span="6">{{ item.chiefEditor }}</van-col>
<!--              <van-col span="2" offset="8">页数</van-col>-->
<!--              <van-col span="5"> {{ item.page }}</van-col>-->
            </van-row>
          </div>
        </div>
        <div style="height: 0.7rem"></div>
      </div>
<!--      <div class="seeMore">-->
<!--        -->
<!--      </div>-->
    </div>
    <!--    选期弹出层-->
    <van-popup v-model="showStage" closeable position="bottom">
      <div style="margin-top: 1rem">
        <van-tabs v-model="activeName"  @change="clickYear()">
          <van-tab v-for="item in year" :title="item" :key="item" :name="item">
            <div class="stageList">
              <div v-for="(items,index) in nub" :key="index" class="clickStage" @click="clickstage(items,index,item)"
                   :class="{active:stageIndex==index}">
                {{ items }}
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>

    </van-popup>
  </div>
</template>

<script>
import {PeriodicalYear,PeriodicalStage,Periodical} from '@/api/journalApi/notOpenbookDetsillsApi'
import {Toast} from "vant";
export default {
  name: "notOpenbookDetails",
  data() {
    return {
      count:'0',
      activeName:'', //选期年绑定的值
      ip: 'http://218.89.178.103:805/tp/bdqk/cover/', //热门文章拼接url
      ids:'',//传过来的拼音name
      stageIndex: 0,
      showStage: false,
      imgBook: {},
      list: [],
      year: [],
      nub: [],
      lists:'',
    }
  },
  created() {
    this.ids = this.$route.query.ids
    let date = {title: this.ids}
    PeriodicalYear(date)
        .then(res=>{
          this.imgBook =  res.data.data
          this.year = res.data.data
          this.activeName = res.data.data[0]
         // console.log(res.data)
          let mot = {
            title:  this.ids,
            year: this.activeName
          }
          PeriodicalStage(mot)
              .then(res=>{
              //  console.log(res.data)
                this.nub = res.data.data
                let params = {
                  stage: this.nub[0],
                  title: this.ids,
                  year: this.activeName,
                }
                Periodical(params)
                    .then(res=>{
                  //    console.log(res.data.data)
                      this.list = res.data.data[0]
                      this.lists= res.data.data
                      // if(this.list.length > 0){
                      //   this.showStage = false
                      // }else {
                      //   Toast.fail('暂无数据');
                      // }

                    })
                    .catch(err=>{

                    })
              })
        })


  },
  beforeMount() {
    // //初始化多少期
    // let params = {
    //   qi:'01',
    //   pykm:this.ids,
    //   year:this.activeName,
    //   page:1,
    //   pageSize:3
    // }
    // selectqi(params)
    //     .then(res=>{
    //       this.count = res.data.data.count
    //       this.list = res.data.data.index
    //       if(this.list.length > 0){
    //         this.showStage = false
    //       }else {
    //         Toast.fail('暂无数据');
    //       }
    //     })
    //     .catch(err=>{
    //
    //     })
  },
   //由于异步  所以监听activeName变化
  watch: {
    activeName(news ,olds) {
      this.$nextTick(() => {
        //初始化多少期
       // console.log(news)
        let params = {
          qi:'01',
          pykm:this.ids,
          year:this.activeName,
          page:1,
          pageSize:3
        }
      //   selectqi(params)
      //       .then(res=>{
      //         this.count = res.data.data.count
      //         this.list = res.data.data.index
      //         if(this.list.length > 0){
      //           // this.showStage = false
      //         }else {
      //           Toast.fail('暂无数据');
      //         }
      //       })
      //       .catch(err=>{
      //
      //       })
      //
      });
    },
  },
  methods: {
    //跳pdf
    topdf(item){
     // console.log(item)
      this.$router.push({name:'vuepdf',query: {tableName: item.tableName,sysId: item.number,fileName: item.fileName,'title':item.title}})
    },
    //返回按钮
    routerBack(){
      this.$router.go(-1)
    },
    //点击年
    clickYear(){
     // console.log(this.activeName)
      let mot = {
        title:  this.ids,
        year: this.activeName
      }
      PeriodicalStage(mot)
          .then(res=>{
            // console.log(res.data)
            this.nub = res.data.data
          })
      // selectyear(params)
      //     .then(res=>{
      //       console.log(res.data)
      //       this.nub = []
      //       this.nub = res.data.data
      //     })
      //     .catch(err=>{
      //
      //     })
    },
    //选期弹出
    stagebtn() {
      this.showStage = true
      // let params = {
      //   pykm:this.ids,
      //   year:this.activeName
      // }
      // // selectyear(params)
      // //     .then(res=>{
      // //       // console.log(res.data)
      // //       this.nub = []
      // //       this.nub = res.data.data
      // //     })
      // //     .catch(err=>{
      // //
      // //     })

    },

    clickstage(items, index) { // 传入一个当前值
    //console.log(items, index)
      this.stageIndex = index
      let params = {
        stage: items,
        title: this.ids,
        year: this.activeName,
      }
      Periodical(params)
          .then(res=>{
            // console.log(res.data.data)
            this.list = res.data.data[0]
            this.lists= res.data.data
            if(res.data.data.length > 0){
              this.showStage = false
            }else {
              Toast.fail('暂无数据');
            }

          })
          .catch(err=>{

          })
    },
  }
}
</script>

<style scoped>
.redTltle {
  /*width: 10rem;*/
  height: 1.15rem;
  background-color: #af2536;
  font-size: 0.453rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  text-align: center;
  line-height: 1.15rem;
  margin-bottom: 0.3rem;
}

.redline {
  width: 100%;
  height: 0.16rem;
  background-color: #af2536;
}

.topBox {
  width: 100%;
}

.bigImg {
  margin: 0.7rem 0;
  text-align: center;
}

.bookName {
  margin: 0.4rem 0;
  text-align: center;
  font-size: 0.533rem;
  font-weight: bolder;
}

.detailstext {
  margin: 0 0.32rem;
}

.detailstext > div {
  font-size: 0.373rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.75;
  margin: 0.19rem 0;
}

.detailstext > div:first-child {
  margin: 0.4rem 0;
  font-size: 0.373rem;
  color: #000000;
  opacity: 1;

}

.nav {
  margin: 0.7rem 0;
  text-align: center;
  font-size: 0.4rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
}

.yearText {
  font-size: 0.37rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.8;
}

.nub {
  font-size: 0.25rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.6;
}

.smred {
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #af2536;
}

.navbottomText {
  margin: 0.6rem 0;
}

.listTitle {
  font-family: PingFang-SC-Medium;
  font-size: 0.427rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.92;
  margin-bottom: 0.36rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

}

.listname {
  font-family: PingFang-SC-Medium;
  font-size: 0.293rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.6;
  margin: 0.44rem 0;
}

.seeMore {
  text-align: center;
  font-family: PingFang-SC-Medium;
  font-size: 0.32rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.76;
  margin-bottom: 1.5rem;
}

.bottomBox {
  margin: 0 0.44rem;
}

.clickStage {
  width: 1.867rem;
  height: 0.933rem;
  line-height: 0.933rem;
  border-radius: 0.04rem;
  font-size: 0.293rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.65;
  text-align: center;
  margin: 0.1rem 0.066rem;
}

.active {
  background-color: #af2536;
  color: #ffffff;
  opacity: 1;
}

.stageList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  min-height: 3rem;
  /*align-items:center;*/
  align-content:flex-start;
}
</style>
